<template>
    <div class="dizhiwrap">
        <div class="dizhihd">
            <span class="hddz">收货地址</span>
        </div>
        <div class="hdtips">
            <span class="tips">新增收货地址</span>
        </div>
        <div class="dizhi1">
            <div class="dalu">
                <span class="pswenzi">当前配送至</span>
                <span class="daluname">中国大陆</span>
                <a href="">切换 ></a>
            </div>
            <div class="wrapdizhis">
                <div class="dzheader">
                    <span class="dzinfo1"><span class="xx">*</span><span>地址信息：</span></span>
                    <div class="dzchick">
                        <span class="placwrap">
                            <p class="plac" @click="qing">请选择:&nbsp;{{sheng}}&nbsp;/&nbsp;{{shi}}</p>
                        </span>
                        <span class="xiangxia"></span>
                    </div>
                </div>
                <div :class="{hids:pls}">
                <div class="ycxuanxiang">
                    <ul class="ycshiwrap">
                        <li class="sss active" @click="xuan($event)">省</li>
                        <li @click="xuan($event)" class="sss">市</li>
                        <!-- <li>区</li> -->
                    </ul>
                    <ul class="listshi">
                        <div>
                            <li v-for="(item,key) in bian" :key="key" @click="tag(item,key)">{{item}}</li>
                        </div>
                    </ul>
                    </div>
                </div>
            </div>
            <div class="shicwwrap">
                <div class="shicw errow">{{dz}}</div>
            </div>
            <div class="xiangxidizhis">
                <span class="dzinfo1"><span class="xx">*</span><span>详细地址：</span></span>
                <div class="cndzwrap">
                    <textarea name="shizws" class="shizws" id="" cols="20" rows="2" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"  @keyup="likai" v-model="xiangxidz"></textarea>
                </div>
            </div>
            <div class="xiangxicw errow">{{xxdizhi}}</div>
        </div>
        <form action="" class="myforms" style="width: 50%;">
            <div class="next-row">
                <div class="xinxt">
                    <label for="">邮政编码：</label>
                </div>
                <div class="xinrs">
                    <span class="youbianwrap">
                        <input type="text" class="youbian" placeholder="请编写邮编" v-model="youbian" @keyup="lkyoubian">
                    </span>
                    <div class="youxiang xinerro">{{yxerro}}</div>
                </div>
            </div>
            <div class="next-row">
                <div class="xinxt">
                    <label for="" class="shr">收货人姓名：</label>
                </div>
                <div class="xinrs">
                    <span class="shrxinming">
                            <input type="text" class="fied" autocomplete="off" v-model="uname" @blur="name">
                    </span>
                    <div class="xinerro shxmcw">{{shname}}</div>
                </div>
            </div>
            <div class="next-row">
                <div class="xinxt">
                    <label for="" class="shr">手机号码：</label>
                </div>
                <div class="xinrs">
                    <div class="shoujihaowrap">
                        <div class="sjh-l">
                            <span class="sjhl">
                                <span class="sjhzuo">
                                    <em><span>中国大陆+86</span></em>    
                                </span>
                                <span class="contor">
                                    <span>
                                        <i></i>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div class="sjh-r">
                            <div class="sjhr">
                                <span class="sjh1">
                                    <input type="text" class="sjh" placeholder="电话号码、手机号码必须填一项" autocomplete="off" v-model="phone" @keyup="lkphone">
                                </span>
                                <div class="errow">{{haoma}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="next-row">
                <div class="xinxt">
                    <label for="" class="shr"></label>
                </div>
                <div class="xinrs">
                    <span class="xrs">
                        <span class="xrs1" @click="morens">
                            <i>√</i>
                        </span>
                    </span>
                    <span class="qmr">设置为默认收货地址</span>
                </div>
            </div>
            <div class="next-row">
                <div class="xinxt">
                    <label for="" class="shr"></label>
                </div>
                <div class="xinrs">
                    <button class="xxt1" type="button" @click="baocun">保存</button>
                </div>
            </div>
        </form>
        <div class="addressList">
            <div class="masagewrap">
                <i></i>
                <div class="dizhishus">已保存<span class="yiyoutiaoshu">{{tiao}}</span>了条地址，还能保存<span class="hainengbaocun">{{yutiao}}</span>条地址</div>
            </div>
            <div>
                <ul class="clearfix dzlistwrap">
                    <li  style="width:10%"> <div class="wraper">收货人</div></li>
                    <li  style="width:15%"> <div class="wraper">所在地区</div></li>
                    <li  style="width:25%"> <div class="wraper">详细地址</div></li>
                    <li  style="width:10%"> <div class="wraper">邮编</div></li>
                    <li  style="width:13%"> <div class="wraper">电话/手机</div></li>
                    <li  style="width:14%"> <div class="wraper">操作</div></li>
                    <li  style="width:12%"> <div class="wraper"></div></li>
                </ul>
                <ul class="dzlists">
                    <li v-for="(item,key) in dzwrap" :key="key">
                        <ul class="dantiao">
                            <li style="width:10%" class="dtfs"><div class="sjruname dtmass">{{item.uname}}</div></li>
                            <li style="width:15%"><div class="dtmass"><span class="chenzhen"><span v-for="(litem,lkey) in item.diqu" :key="lkey">{{litem}}&nbsp;</span></span></div></li>
                            <li style="width:25%"><div class="dtmass">{{item.xxdizhi}}</div></li>
                            <li style="width:10%" class="dtfs"><div class="dtmass">{{item.youbian}}</div></li>
                            <li style="width:13%" class="dtfs"><div class="dtmass">{{item.phone}}</div></li>
                            <li style="width:14%" class="dtfs">
                                <div class="dtmass">
                                    <div class="taction">
                                        <a href="javascript:;" @click="xiugai(item,key)">修改</a>
                                        <span>|</span>
                                        <a href="javascript:;" @click="shanchudz(key)">删除</a>
                                    </div>
                                </div>
                            </li>
                             <li style="width:12%" v-if="(mokey==JSON.stringify(item))"><div class="dtmass"><div class="fanzhenwrap">
                                <span class="morens">默认地址</span>
                                </div></div></li>
                            <li style="width:12%" class="dtfs" v-else><div class="dtmass"><div>
                                <span class="deflt" @click="sheweimoren(JSON.stringify(item))">设为默认</span>
                                </div></div></li>
                           
                        </ul>
                    </li>
                    <!-- <li>
                        <ul class="dantiao">
                            <li style="width:10%" class="dtfs"><div class="sjruname dtmass">刘俊阳</div></li>
                            <li style="width:15%"><div class="dtmass"><span class="chenzhen">四川省  成都市  金堂县 三星镇 </span></div></li>
                            <li style="width:25%"><div class="dtmass">四川西南交大希望学院金堂校区</div></li>
                            <li style="width:10%" class="dtfs"><div class="dtmass">000000</div></li>
                            <li style="width:13%" class="dtfs"><div class="dtmass">18*******79</div></li>
                            <li style="width:14%" class="dtfs">
                                <div class="dtmass">
                                    <div class="taction">
                                        <a href="">修改</a>
                                        <span>|</span>
                                        <a href="">删除</a>
                                    </div>
                                </div>
                            </li>
                            <li style="width:12%"><div class="dtmass"><div class="fanzhenwrap">
                                <span class="morens">默认地址</span>
                                </div></div></li>
                        </ul>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            xgkey:"",
            oleitem:"",
            xiugaip:false,
            mokey:"",
            yutiao:"",
            tiao:"",
            dzwrap:[],
            dizhiwrap:"",
            arr:"",
            zhenphone:"",
            zhenyoubian:"",
            phone:"",
            uname:"",
            xiangxidz:"",
            youbian:"",
            xxdizhi:"",
            shname:"",
            haoma:"",
            dz:"",
            yxerro:"",
            moren:false,
            pls:true,
            sheng:"省",
            shi:"市",
            bian:"",
            shengwrap:["北京市","上海市","天津市","重庆市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","南阳市","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","广西壮族自治区","内蒙古自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区"],
            shiwrap:[['北京市区','北京市辖区'],['上海市区','上海市辖区'],['天津市区','天津市辖区'],['重庆市区','重庆市辖区'],['石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口', '承德市', '廊坊市', '沧州市', '衡水市', '邢台市'],['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'],['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'],['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边州','长白山管委会'],['哈尔滨市','齐齐哈尔市','大庆市','佳木斯市','牡丹江市','七台河市','双鸭山市','黑河市','鸡西市','伊春市','绥化市','鹤岗市','加格达奇市'],['南京市','苏州市','无锡市','常州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','宿迁市','淮安市','徐州市'],['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'],['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','巢湖市','六安市','亳州市','池州市','宣城市'],['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'],['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'],['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'],['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市'],['武汉市','黄石市','十堰市','荆州市','宜昌市','襄樊市','鄂州市','荆门市','孝感市','黄冈市','咸宁市','随州市'],['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市'],['广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],['文昌市','琼海市','万宁市','五指山市','东方市','儋州市'],['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市'],['贵阳市','六盘水市','遵义市','安顺市'],['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市'],['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'],['兰州市','金昌市','白银市','天水市','嘉峪关市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市'],['西宁市'],['台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市'],['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'],['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市'],['拉萨市'],['银川市','石嘴山市','吴忠市','固原市','中卫市'],['乌鲁木齐市','克拉玛依市'],['台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市']]
        }
    },
    methods:{
        xiugai(val,key){
            console.log(val)
            this.xgkey=key
            this.xiugaip=true
            this.olditem=val
            this.sheng=val.diqu[0]
            this.shi=val.diqu[1]
            this.xiangxidz=val.xxdizhi
            this.youbian=val.youbian
            this.uname=val.uname
            this.phone=val.phone
            this.zhenyoubian=val.youbian
            this.zhenphone=val.phone
            console.log(this.zhenyoubian,this.zhenphone)
            if(this.mokey==JSON.stringify(val)){
                console.log(1)
                let xs=document.getElementsByClassName("xrs1")[0]
                xs.classList.add("active")
                this.moren=true
            }
        },
        sheweimoren(val){
            axios.post("/api/sheweimoren",{newmr:val}).then((data)=>{
                if(data.data){
                    this.mokey=val
                }else{
                    this.$toast({
                        message:'设置失败，请重新操作',
                        duration:2000
                    })
                    return false
                }
            })
        },
        shanchudz(val){
            axios.post("/api/shanchudz",{key:val}).then((data)=>{
              if(data.data){
                    this.dzwrap.splice(val,1)
                    this.tiao=this.tiao-1
                    this.yutiao++;
                    console.log(data.data)
              }else{
                   this.$toast({
                        message:'删除失败，请重新操作',
                        duration:2000
                    })
                    return false
              }
            })
        },
        baocun(){
            var _this=this
            if(this.sheng=="省" || this.shi=="市"){
                console.log(1)
                this.$toast({
					message:'请完善地址信息',
					duration:2000
				})
				return false
            }
            if(this.xiangxidz.length<=3){
                console.log(2)
                this.$toast({
					message:'请完善地址信息',
					duration:2000
				})
				return false
            }
            if(!this.zhenyoubian){
                console.log(3)
                this.$toast({
					message:'请完善地址信息',
					duration:2000
				})
				return false
            }
            if(!this.uname){
                console.log(4)
                this.$toast({
					message:'请完善地址信息',
					duration:2000
				})
				return false
            }
            if(!this.zhenphone){
                console.log(5)
                this.$toast({
					message:'请完善地址信息',
					duration:2000
				})
				return false
            }
            let shengshi=[]
            shengshi.push(this.sheng)
            shengshi.push(this.shi)
            let dizhi={
                diqu:shengshi,
                xxdizhi:this.xiangxidz,
                youbian:this.zhenyoubian,
                uname:this.uname,
                phone:this.zhenphone
            }
            console.log(this.zhenphone,this.zhenyoubian)
            console.log(dizhi.phone,dizhi.youbian)
            if(this.xiugaip){
               if(this.mokey==JSON.stringify(this.oleitem)){
                   if(this.moren){
                       var mr=true
                   }else{
                       var mr=false
                   }
                   axios.post("/api/shirenmo",{dizhi,mr,key:this.xgkey}).then((data)=>{
                       if(data.data){
                           this.$toast({
                                    message:'保存成功',
                                    duration:1500
                                })
                            axios.post("/api/chadizhi").then((data)=>{
                                if(data.data){
                                    this.arr=""
                                    this.dizhiwrap="",
                                    this.dzwrap=[]
                                    this.arr=data.data
                                    this.dizhiwrap=data.data[0].zongdizhi.split('.')
                                    this.tiao=this.dizhiwrap.length
                                    this.yutiao=20-this.tiao
                                    for(var i=0;i<_this.dizhiwrap.length;i++){
                                        _this.dzwrap.push(JSON.parse(_this.dizhiwrap[i]))
                                        if(_this.dizhiwrap[i]==data.data[0].moren){
                                            _this.mokey=_this.dizhiwrap[i]
                                        }
                                    }
                                }else{

                                }
                            })
                            this.sheng="省"
                            this.shi="市"
                            this.xiangxidz=""
                            this.youbian=""
                            this.zhenyoubian=""
                            this.uname=""
                            this.phone=""
                            this.zhenphone=""
                             let xs=document.getElementsByClassName("xrs1")[0]
                                xs.classList.remove("active")
                                this.moren=true

                       }else{
                            this.$toast({
                                message:'保存失败！请重新操作',
                                duration:1500
                            })
                            return false
                       }
                   })
               }else{
                   if(this.moren){
                       var mr=true
                   }else{
                       var mr=false
                   }
                   axios.post("/api/bushimoren",{dizhi,key:this.xgkey,mr}).then((data)=>{
                       if(data.data){
                           this.$toast({
                                    message:'保存成功',
                                    duration:1500
                                })
                            axios.post("/api/chadizhi").then((data)=>{
                                if(data.data){
                                    this.arr=""
                                    this.dizhiwrap="",
                                    this.dzwrap=[]
                                    this.arr=data.data
                                    this.dizhiwrap=data.data[0].zongdizhi.split('.')
                                    this.tiao=this.dizhiwrap.length
                                    this.yutiao=20-this.tiao
                                    for(var i=0;i<_this.dizhiwrap.length;i++){
                                        _this.dzwrap.push(JSON.parse(_this.dizhiwrap[i]))
                                        if(_this.dizhiwrap[i]==data.data[0].moren){
                                            _this.mokey=_this.dizhiwrap[i]
                                        }
                                    }
                                }else{

                                }
                            })
                            this.sheng="省"
                            this.shi="市"
                            this.xiangxidz=""
                            this.youbian=""
                            this.zhenyoubian=""
                            this.uname=""
                            this.phone=""
                            this.zhenphone=""
                             let xs=document.getElementsByClassName("xrs1")[0]
                                xs.classList.remove("active")
                                this.moren=true
 
                       }else{
                           this.$toast({
                                message:'保存失败！请重新操作',
                                duration:1500
                            })
                            return false
                       }
                   })
               }
               
            }else{
                if(this.moren){
                    axios.post("/api/mrdizhi",{dizhi}).then((data)=>{
                        if(data.data){
                        this.$toast({
                            message:'保存成功',
                            duration:1500
                        })
                        axios.post("/api/chadizhi").then((data)=>{
                                if(data.data){
                                    this.arr=""
                                    this.dizhiwrap="",
                                    this.dzwrap=[]
                                    this.arr=data.data
                                    this.dizhiwrap=data.data[0].zongdizhi.split('.')
                                    this.tiao=this.dizhiwrap.length
                                    this.yutiao=20-this.tiao
                                    for(var i=0;i<_this.dizhiwrap.length;i++){
                                        _this.dzwrap.push(JSON.parse(_this.dizhiwrap[i]))
                                        if(_this.dizhiwrap[i]==data.data[0].moren){
                                            _this.mokey=_this.dizhiwrap[i]
                                        }
                                    }
                                }else{

                                }
                            })
                            this.sheng="省"
                            this.shi="市"
                            this.xiangxidz=""
                            this.youbian=""
                            this.zhenyoubian=""
                            this.uname=""
                            this.phone=""
                            this.zhenphone=""
                             let xs=document.getElementsByClassName("xrs1")[0]
                                xs.classList.remove("active")
                                this.moren=true

                    }else{
                        this.$toast({
                            message:'保存失败！请重新操作',
                            duration:1500
                        })
                        return false
                    }
                    })
                }else{
                    axios.post("/api/gdizhi",{dizhi}).then((data)=>{
                    if(data.data){
                        this.$toast({
                            message:'保存成功',
                            duration:1500
                        })
                        axios.post("/api/chadizhi").then((data)=>{
                                if(data.data){
                                    this.arr=""
                                    this.dizhiwrap="",
                                    this.dzwrap=[]
                                    this.arr=data.data
                                    this.dizhiwrap=data.data[0].zongdizhi.split('.')
                                    this.tiao=this.dizhiwrap.length
                                    this.yutiao=20-this.tiao
                                    for(var i=0;i<_this.dizhiwrap.length;i++){
                                        _this.dzwrap.push(JSON.parse(_this.dizhiwrap[i]))
                                        if(_this.dizhiwrap[i]==data.data[0].moren){
                                            _this.mokey=_this.dizhiwrap[i]
                                        }
                                    }
                                }else{

                                }
                            })
                            this.sheng="省"
                            this.shi="市"
                            this.xiangxidz=""
                            this.youbian=""
                            this.zhenyoubian=""
                            this.uname=""
                            this.phone=""
                            this.zhenphone=""
                             let xs=document.getElementsByClassName("xrs1")[0]
                                xs.classList.remove("active")
                                this.moren=true

                    }else{
                        this.$toast({
                            message:'保存失败！请重新操作',
                            duration:1500
                        })
                        return false
                    }
                })
                }
            }
            
        },
        lkphone(){
            let ph=this.phone.match(/^[1][3,4,5,7,8][0-9]{9}$/)
            if(ph){
                this.haoma=""
                this.zhenphone=this.phone
            }else{
                this.haoma="请输入正确的格式"
                this.zhenphone=""
            }
        },
        name(){
            if(!this.uname){
                this.shname="请输入收货人姓名"
            }else{
                this.shname=""
            }
        },
        likai(){
            if(this.xiangxidz.length<=3){
                this.xxdizhi="请输入详细地址"
            }else{
                this.xxdizhi=""
            }
        },
        lkyoubian(){
            let newyb=this.youbian.match(/^[0-9]{6}$/)
            if(newyb){
                this.yxerro=""
                this.zhenyoubian=this.youbian
            }else{
                this.yxerro="请输入正确的邮编格式"
                this.zhenyoubian=""
            }
        },
        morens(){
            let xs=document.getElementsByClassName("xrs1")[0]
            if(xs.className.indexOf("active")>-1){
                xs.classList.remove('active')
                this.moren=false
            }else{
                xs.classList.add("active")
                this.moren=true
            }
        },
        qing(){
            this.pls=!this.pls
        },
        tag(val,key){
            var _this=this
            let wraps=document.getElementsByClassName("sss")
            if(this.bian==this.shengwrap){
                this.sheng=val
                for(var i=0;i<wraps.length;i++){
                    wraps[i].classList.remove("active")
                }
                wraps[1].classList.add("active")
                this.bian=this.shiwrap[key]
            }else{
                this.shi=val
                 for(var i=0;i<wraps.length;i++){
                    wraps[i].classList.remove("active")
                }
                wraps[0].classList.add("active")
                this.bian=this.shengwrap
                this.pls=true
            }

        },
        xuan(val){
            var _this=this
            let wraps=document.getElementsByClassName("sss")
            for(var i=0;i<wraps.length;i++){
                wraps[i].classList.remove("active")
                if(val.toElement.innerText==wraps[i].innerText){
                    wraps[i].classList.add("active")
                    if(i==0){
                        _this.bian=_this.shengwrap
                    }else if(i==1){
                       if(_this.sheng=="省"){
                           _this.bian=_this.shiwrap[0]
                       }else{
                           for(var i=0;i<_this.shengwrap;i++){
                               if(_this.sheng==_this.shengwrap[i]){
                                   _this.bian=_this.shiwrap[i]
                               }
                           }
                       }
                    }
                }
            }
            console.log(val.toElement.innerText)
        }
    },
    created(){
        var _this=this
        this.bian=this.shengwrap
        axios.post("/api/chadizhi").then((data)=>{
          if(data.data){
              this.arr=data.data
              this.dizhiwrap=data.data[0].zongdizhi.split('.')
              this.tiao=this.dizhiwrap.length
              this.yutiao=20-this.tiao
              for(var i=0;i<_this.dizhiwrap.length;i++){
                  _this.dzwrap.push(JSON.parse(_this.dizhiwrap[i]))
                  if(_this.dizhiwrap[i]==data.data[0].moren){
                      _this.mokey=_this.dizhiwrap[i]
                  }
              }
          }else{

          }
        })
    }
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.hids{
    display: none;
}
    .dizhiwrap{
        width: 850px;
        position: relative;
    }
    .dizhihd{
        font-size: 14px;
        color: #014d7f;
        background-color: #f3f8fe;
        height: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .hddz{
            padding-left: 10px;
    }
    .tips{
        display: inline-block;
        width: auto;
        height: 26px;
        line-height: 26px;
        text-align: center;
        margin-right: 5px;
        color: #ff5000;
        font-size: 12px;
    }
    .dizhi1{
        margin: 20px 10px 0;
        width: 426px;
    }
    .dalu{
        line-height: 30px;
        margin-bottom: 16px;
        height: 31px;
        background: #f2f2f2;
        border: 1px solid #f2f2f2;
        font-size: 12px;
    }
    .pswenzi{
        color: #9b9b9b;
        margin: 0 15px;
        display: inline-block;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
    }
    .daluname{
        color: #000;
    }
    .dalu a{
        color: #1470cc;
        float: right;
        margin-right: 15px;
        display: inline-block;
    }
    .wrapdizhis{
        width: 100%;
        height: 36px;
        font-size: 12px;
    }
    .dzheader{
        line-height: 30px;
         height: 30px;
    }
    .dzinfo1{
        width: 88px;
        padding-right: 12px;
        text-align: right;
        top: 0;
        vertical-align: top;
        line-height: 30px;
        display: inline-block;
        color: #333;
    }
    .xx{
        margin-right: 4px;
        color: #ff3000;
    }
    .dzchick{
        position: relative;
        width: 226px;
        line-height: 28px;
        border: 1px solid #c4c6cf;
        border-radius: 3px;
        padding: 0 8px;
        display: inline-block;
    }
    .plac{
      line-height: 28px;
      color: #999;
    }
    .placwrap{
        display: inline-block;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    .xiangxia{
        width: 11px;
        height: 6px;
        background-size: 100% 100%;
        cursor: pointer;
        position: absolute;
        background: url("../assets/img/ys/116.png") no-repeat 100%;
        top: 10px;
        right: 8px;
    }
    .ycxuanxiang{
        /* display: none; */
        position: relative;
        margin-left: -1px;
        background: #fff;
        border: 1px solid #ccc;
        z-index: 99;
    }
    .ycshiwrap{
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        font-size: 0;
    }
    .ycshiwrap li{
        display: inline-block;
        color: #999;
        background: #f0f0f0;
        cursor: pointer;
        text-align: center;
        height: 100%;
        font-size: 12px;
        width: 50%;
    }
    .ycshiwrap li.active{
        color: #4a4a4a;
        margin-left: 0;
        background: #fff;
        /* border-bottom: 1px solid #fff; */
        border-top: none;
        font-weight: 700;
        cursor: default;
    }
    .listshi{
        margin: 5px 10px;
        overflow-y: scroll;
        overflow-x: scroll;
        height: 320px;
    }
    .listshi li{
        color: #000;
        padding: 10px 5px;
        cursor: pointer;
    }
    .listshi li:hover{
        color: #4a8cff;
    }
    .errow{
        margin-left: 78px;
        color: #ff3000;
        font-size: 12px;
        line-height: 22px;
        height: 22px;
    }
    .xiangxidizhis{
        position: relative;
        width: 100%;
        font-size: 12px;
    }
    .cndzwrap{
        padding:5px 5px 0 10px;
        width: 300px;
        height: 48px;
        border: 1px solid #c4c6cf;
        border-radius: 3px;
        vertical-align: top;
        display: inline-block;
    }
    .shizws{
        height: 100%;
        width: 100%;
        font-size: 12px;
        resize: none;
        outline: none;
        border: 0 none;
    }
    .next-row{
        margin-bottom: 16px;
        display: flex;
    }
    .xinxt{
        display: inline-block;
        vertical-align: top;
        color: #666;
        text-align: right;
        padding-right: 12px;
        line-height: 28px;
        font-size: 12px;
    }
    .xinrs{
        flex: 0 0 79.16667%;
        width: 79.16667%;
        max-width: 79.16667%;
    }
    .youbianwrap{
        width: 100%;
        border-color: #ff3000;
        height: 28px;
        border-radius: 3px;
        vertical-align: middle;
        display: inline-table;
        border-collapse: separate;
        font-size: 0;
        border-spacing: 0;
        transition: all .3s ease-out;
        border: 1px solid #c4c6cf;
        background-color: #fff;
    }
    .youbian{
        width: 100%;
        border: none;
        outline: none;
        margin: 0;
        font-weight: 400;
        vertical-align: middle;
        background-color: transparent;
        color: #333;
        height: 26px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 3px;
    }
    .xinerro{
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.5;
        color: #FF3000;
    }
    /* .shr::before{
        margin-right: 4px;
        content: "*";
        color: #ff3000;
    } */
    .shrxinming{
        width: 100%;
        border-radius: 3px;
        height: 28px;
        vertical-align: middle;
        display: inline-table;
        border-collapse: separate;
        font-size: 0;
        border-spacing: 0;
        transition: all .3s ease-out;
        border: 1px solid #c4c6cf;
        background-color: #fff;
    }
    .fied{
        border-radius: 3px;
        height: 26px;
        text-indent: 10px;
        font-size: 12px;
        width: 100%;
        border: none;
        outline: none;
        margin: 0;
        font-weight: 400;
        vertical-align: middle;
        background-color: transparent;
        color: #333;
    }
    .shoujihaowrap{
        margin-left: -2px;
        margin-right: -2px; 
        display: flex;
    }
    .sjh-l{
        padding-left: 2px;
        padding-right: 2px;
        flex: 0 0 41.66667%;
        width: 41.66667%;
        max-width: 41.66667%;
    }
    .sjhl{
        display: inline-flex;
        align-items: center;
        width: 100%;
        min-width: 100px;
        outline: 0;
        color: #333;
        height: 28px;
        border-radius: 3px;
        vertical-align: middle;
        border-collapse: separate;
        font-size: 0;
        border-spacing: 0;
        transition: all .3s ease-out;
        border: 1px solid #c4c6cf;
        background-color: #fff;
        cursor: pointer;
    }
    .sjhzuo{
        padding: 0 8px;
        font-size: 12px;
        height: 26px;
        line-height: 26px;
        display: inline-flex;
        align-items: center;
        width: 100%;
        flex: 1 1 0;
        overflow: hidden;
    }
    .sjhzuo em{
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-style: inherit;
        line-height: 1;
    }
    .contor{
        border-radius: 0 3px 3px 0;
        padding-right: 8px;
        flex: 0 0 auto;
        width: auto;
    }
    .contor>span{
        display: inline-block;
        cursor: pointer;
    }
    .contor>span i{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url("../assets/img/ys/116.png") no-repeat;
        background-position: center center;
    }
    .sjh-r{
        flex: 0 0 58.33333%;
        width: 58.33333%;
        max-width: 58.33333%;
        padding-left: 2px;
        padding-right: 2px;
    }
    .sjh1{
        vertical-align: middle;
        display: inline-table;
        border-collapse: separate;
        font-size: 0;
        border-spacing: 0;
        transition: all .3s ease-out;
        border: 1px solid #c4c6cf;
        background-color: #fff;
        height: 28px;
        border-radius: 3px;
        width: 100%;
    }
    .sjh{
        width: 100%;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-weight: 400;
        vertical-align: middle;
        background-color: transparent;
        color: #333;
        padding: 0 8px;
        font-size: 12px;
        height: 26px;
        border-radius: 3px;
    }
    .qmr{
        font-size: 12px;
        vertical-align: middle;
        margin: 0;
        margin-left: 4px;
        line-height: 1;
    }
    .xrs{
        display: inline-block;
        position: relative;
        line-height: 1;
        vertical-align: middle;
    }
    .xrs1{
        display: block;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 3px;
        border: 1px solid #c4c6cf;
        transition: all .3s ease 0s;
        text-align: left;
        box-shadow: none;
            /* border-color: transparent; */
    }
    .xrs1.active{
        background-color: #5584ff;
    }
    .xrs1 i{
        display: inline-block;
        font-family: NextIcon;
        font-style: normal;
        font-weight: 400;
        text-transform: none;
        transform: scale(.5);
        margin-left: -4px;
        margin-right: -4px;
        position: absolute;
        top: 0;
        opacity: 0;
        line-height: 16px;
        transition: all .3s cubic-bezier(.78,.14,.15,.86);
        color: #fff;
        left: 4px;
        transform: scale(.5);
        margin-left: -4px;
        margin-right: -4px;
    }
    .xrs1 i::before{
        content: "√";
        vertical-align: top;
        margin-top: 0;
        width: 8px;
        font-size: 8px;
        line-height: inherit;
    }
    .xxt1{
        color: #fff;
        background-color: #3e71f7;
        border-color: transparent;
        text-decoration: none;
        border-radius: 3px;
        padding: 0 12px;
        height: 28px;
        line-height: 26px;
        font-size: 12px;
        border-width: 1px;
    }
    .masagewrap{
        background-color: #e3f2fd;
        border-color: #e3f2fd;
        border-radius: 3px;
        box-shadow: none;
        border-style: solid;
        border-width: 1px;
        padding: 12px;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .masagewrap i{
        display: inline-block;
        float: left;
        width: 20px;
        height: 19px;
        background: url("../assets/img/ys/416.png")
    }
    .masagewrap div{
        float: left;
        /* line-height: 16px; */
        color: #666;
        padding-left: 10px;
        font-size: 12px;
    }
    .dzlistwrap li{
        padding: 0;
        background: #ebecf0;
        color: #333;
        text-align: left;
        font-weight: 400;
        border-right: 1px solid #dcdee3;
        float: left;
        height: 40px;
    }
    .wraper{
        padding: 12px 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    .dzlists>li{
        width: 100%;
        overflow: hidden;
                border-bottom: 1px solid #dcdee3;
    }
    .dantiao>li{
        border-right: 1px solid #dcdee3;
        float: left;
        height: 40px;
        font-size: 13px;
        box-sizing: content-box;
    }
    .dtmass{
        padding: 12px 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    .chenzhen{
        border-collapse: collapse;
        border-spacing: 0;
        line-height: 16px;
      
    }
    .dtfs{
        padding-top: 9px;
        padding-bottom: 9px;
    }
    .taction{
        /* margin: 0 auto; */
        text-align: center;
    }
    .taction a:hover{
        text-decoration: underline;
    }
    .deflt{
        cursor: pointer;
    }
    .deflt:hover{
        text-decoration: underline;
        color: #FF0036;
    }
    .morens{
        display: block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ff5000;
        border-radius: 3px;
        background: #ffd6cc;
        color: #f30;
        margin-bottom: 5px;
    }
    .morens{
        font-size: 12px;
    }
</style>

